<template>
    <div class="new" id="header">
        <el-page-header @back="goBack" content="详情页面">
        </el-page-header>
        <h1>{{ news.newtitle }}</h1>
        <div class="article-meta">
            <span>{{ news.createtime | filtertime }}</span>
            <span class="dot">·</span>
            <span class="name">{{ news.newauthor }}</span>
        </div>
        <el-image style="max-width: 100%;" :src="news.newimg" :preview-src-list="[news.newimg]"></el-image>
        <div class="text" v-html="news.newcontent"></div>
        <!--    评论-->
        <div style="width: 1000px; margin: 0 auto">
            <div style="margin: 20px 0">
                <el-rate v-model="comment.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                         :max="5"
                         allow-half
                         show-text
                         :texts="['非常差', '失望至极', '一般般啦', '非常满意', '超级无敌满意']"></el-rate>

                <div style="margin: 10px 0">
                    <el-input type="textarea" placeholder="请输入评论" v-model="comment.content"></el-input>
                    <div style="text-align: right; margin: 10px 0">
                        <el-button type="primary" @click="submit">提交</el-button>
                    </div>
                </div>
            </div>

            <div style="margin: 20px 0">
                <div style="margin: 10px 0; font-size: 24px; padding: 10px 0; border-bottom: 1px solid #ccc; text-align: left">
                    评论列表
                </div>
                <div style="margin: 20px 0;  text-align: left;">
                    <div style="padding: 10px 0; " v-for="item in comments" :key="item.id">
                        <div style="display: flex">
                            <div style="width: 80px">
                                <el-avatar :size="50" :src="item.userphoto"></el-avatar>
                            </div>
                            <div style="flex: 1">
                                <div>{{ item.username }} <span style="margin-left: 10px">{{ item.createtime }}</span>
                                </div>
                                <div style="margin-top: 10px; color: #666">{{ item.content }}</div>
                                <div>
                                    <el-button type="text" @click="reply(item.id, item.username)">回复</el-button>
                                </div>

                                <!-- 回复列表 -->
                                <div v-if="item.children.length"
                                     style="margin-left: 100px; background-color: aliceblue; padding: 10px; border-radius: 10px">
                                    <div v-for="sub in item.children" :key="sub.id">
                                        <div style="padding:5px 0"><b style="cursor: pointer"
                                                                      @click="reply(sub.pid, sub.username)">{{
                                            sub.username
                                            }}</b> <span>回复 <span style="color: cornflowerblue">@{{
                                            sub.target
                                            }}</span>
                    <span style="color: #666; margin-left: 10px">{{ sub.content }}</span></span>
                                            <span style="float: right; font-size: 13px; color: #666; margin-top: 3px">{{
                                                sub.createtime
                                                }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <el-dialog title="回复" :visible.sync="dialogFormVisible" width="40%">
                <el-form :model="replyComment">
                    <el-form-item label="内容" :label-width="100">
                        <el-input v-model="replyComment.content" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveReply">确 定</el-button>
                </div>
            </el-dialog>


        </div>
        <div class="go-top"><a href="#header">UP</a></div>
    </div>

</template>

<script>
import {getNewsById, addComment, getCommentByNewsId, addCommentNum} from "../api/Comment";
import moment from "moment/moment";

export default {
    name: "newcontent",
    data() {
        return {
            news: {},
            value: 0,
            comments: [],
            comment: {
                rate: 0,
                content: ''
            },
            replyComment: {},
            dialogFormVisible: false
        }
    },
    created() {
        this.getNew();
    },
    filters: {
        filtertime(value) {
            return moment(value).format('YYYY年MM月DD日 HH:mm:ss');
        },
    },
    methods: {

        goBack() {
            this.$router.back()
            console.log('go back');
        },
        reply(pid, target) {
            let userinfo = JSON.parse(localStorage.getItem("user"))
            this.replyComment = {
                pid: pid,
                userId: userinfo.id,
                username: userinfo.username,
                foreignId: this.news.id,
                newtitle: this.news.newtitle,
                target: target,
                userphoto: userinfo.avatarUrl,
            }
            this.dialogFormVisible = true
        },
        load() {
            getCommentByNewsId(this.news.id).then(res => {
                this.value = res.rate
                this.comments = res.comments
            })
        },
        saveReply() {
            console.log(this.replyComment.content.trim())
            if (!this.replyComment.content) {
                this.$notify.error('评论不能为空')
                return
            }
            addComment(this.replyComment).then(success => {
                if (success) {
                    this.$notify.success('评论成功')
                    this.load()
                    this.replyComment = {}
                    this.dialogFormVisible = false
                } else {
                    this.$notify.error('评论失败')
                }
            })
        },
        //评论成功新闻评论+1
        // CommentYes() {
        //     this.request.post("/news", this.news).then(res => {
        //         console.log(res)
        //     })
        // },
        submit() {
            let userinfo = JSON.parse(localStorage.getItem("user"))
            if (!userinfo) {
                this.$message.warning("请先登录再评论")
                return;
            }
            console.log(this.comment)
            if (!this.comment.content) {
                this.$notify.error('评论不能为空')
                return
            }
            console.log(userinfo)
            this.comment.userId = userinfo.id
            this.comment.username = userinfo.username
            this.comment.userphoto = userinfo.avatarUrl
            this.comment.foreignId = this.news.id
            this.comment.newtitle = this.news.newtitle
            addComment(this.comment).then(success => {
                if (success) {
                    this.$notify.success('评论成功')
                    // this.news.comment += 1;
                    // this.CommentYes();
                    this.load()
                    this.comment = {}
                } else {
                    this.$notify.error('评论失败')
                }
            })
        },
        //
        getNew() {
            console.log(this.$route.query.newid)
            getNewsById(this.$route.query.newid).then(res => {

                console.log(res)
                res.newcontent = res.newcontent.replace(/<img/g, '<img style="max-width: 100%;"');
                this.news = res
                this.load();
            })
        },
    }
}

</script>

<style scoped>
.article-meta {
    margin: 16px 0 36px;
    font-size: 14px;
    line-height: 20px;
    color: #707070;
}

.article-meta .dot {
    margin: 0 4px;
}

h1 {
    font-size: 37px;
    font-weight: 600;
    line-height: 56px;
    color: #000;
}

.new {
    width: 750px;
    height: 100%;
    margin: auto;
}

.text {
    font-size: 20px;
    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
    line-height: 1.667;
    color: #222;
}

.go-top {
    position: fixed;
    right: 150px;
    bottom: 100px;
    cursor: pointer;
    height: 50px;
    width: 50px;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 28px;
    color: #1989fa;
}

.go-top:hover {
    transform: scale(1.3);
    transition: all 0.4s ease 0s;
    -webkit-transform: scale(1.3);
}

.go-top a {
    text-decoration: none;
    color: #1989fa;
}
</style>
